iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 23
0
自我挑戰組

JavaScript 新手筆記系列 第 23

Day23 - 事件(04) - BMI

  • 分享至 

  • xImage
  •  

前言

今天會介紹一些可能會用到的事件,並優化之前的 BMI( Day18 - DOM(04) - BMI )

其他事件

  • 關於使用在element.addEventListener('event' , functionName , BooLean);上的第一個參數上,一些有別於 click 的事件,簡單介紹如下,依實際需求使用
  • 焦點:元件取得焦點,使用 focus ,元件失去焦點,使用 blur
  • keyboard:與鍵盤相關的事件,如 keydowninput
    • event.keyCode:可以得知按下按鈕的 ASCII 碼
    • 鍵盤對應數值可用 console.log 確認,如鍵盤 1 對應 ASCII 碼為 49
  • form:與表單相關的事件,如 change ,可以偵測表單是否變動
  • mouse:與滑鼠相關的事件,如 clickmousemove
  • 座標:網頁水平為 x (往右為正),垂直為 y (往下為正),原點(0,0)在左上角
    • screen:螢幕,也就是你電腦螢幕的大小
    • page:頁面,所開啟的網頁,如果網頁很長有捲軸,座標就可能會超過可視區域
    • client:操作端,實際操作的頁面,就算捲軸往下拉,座標也不會超過可視區域

BMI

  • 利用 addEventListener 將相關動作都放在 JS 上
  • 增加一個回饋機制
  • 利用 focus 在點入輸入欄位時,進行提示需輸入數字
    • 不過因為 type 也有定義為數字,應該比較不必要
  • 利用 blur 在離開輸入欄位時,判定是否未輸入(空值)
  • 送出時增加一個條件判斷,若有未填值的狀況,則回饋訊息

index.html

<body>
    <h1>請輸入你的身高體重</h1>
    <!-- 設定標題 -->
    <p>體重: <input type="number" id="weight" value=""> 公斤</p>
    <!-- input 用來輸入,格式為數字 -->
    <p>身高: <input type="number" id="height" value=""> 公分</p>
    <!-- input 用來輸入,格式為數字 -->
    <input type="submit" value="計算" id="calculate">
    <!-- 建立一個按鈕,按下時會執行函數 BMIfun()  -->
    <p>BMI 計算的結果為:<em id="BMI"></em></p>
    <!-- 將 BMI 的數值填入 -->
    <p>判斷為:<em id="ans"></em></p>
        <!-- 將 ans 的數值填入 -->
    <br>
    <p>回饋:<em id="feedback"></em></p>
    <script src="JS/test.js"></script>
</body>

test.js

// 點擊後確認數值後,進行 BMI 計算
function BMIcalculate(){
    var w = weight.value;
    var h = height.value;
    // 讀取輸入的值 .value
    if (w == '' || h ==''){
        return feedback.innerHTML = '身高體重不可以為空';
    }
    // 若欄位未輸入,則回饋訊息
    BMI.innerHTML = BMIfun(w , h);
    // 將 BMIfun() 的值存入 id = BMI
    ans.innerHTML = BMIans(BMIfun(w , h));
    // 將 BMIans() 的值存入 id = ans
}

// 依照 BMI 公式進行計算後回傳
function BMIfun (weight,height){
    height = height / 100;
    BMI = weight / (height * height);
    BMI = BMI.toFixed(2);
    // console.log(BMI);
    return BMI ;
}

// 將 BMI的值代入進行判斷後回傳
function BMIans(BMI){
    // console.log(BMI);
    // 檢查用,確保輸入對的值
    if (BMI >= 18 && BMI <= 24){
        return "似乎還蠻正常的!";
        } else if (BMI > 24){ 
            return "似乎有點過胖囉!";
        } else { 
            return "似乎有點過瘦囉!";
        }
}
// 確認是否為空值
function check(e){
    var str = e.target.value;
    if (str == ''){
        feedback.innerHTML = '欄位不可以為空';
    }
};

// 剛點入時提醒
function remind(e){
    var str = e.target.value;
    if (str == ''){
        feedback.innerHTML = '請填寫整數數字';
    }
};
var weight = document.querySelector('#weight');  // 重量
var height = document.querySelector('#height'); // 身高(公尺)

var BMI = document.querySelector('#BMI');
var ans = document.querySelector('#ans');

var calculate = document.querySelector("#calculate");
var feedback = document.querySelector('#feedback');

// 點擊後進行 BMI 計算
calculate.addEventListener('click' , BMIcalculate , false);

// 移開輸入格值進行確認
weight.addEventListener('blur', check , false);
height.addEventListener('blur', check , false);

// 點進輸入格值進行提示
weight.addEventListener('focus', remind , false);
height.addEventListener('focus', remind , false);
  • 可以嘗試操作以下情況
    • 當 2 格都未填值,分別點選輸入框,看回饋值,再按計算,看回饋值
    • 只 1 格填寫,分別點選輸入框,看回饋值,再按計算,看回饋值

次回

事件篇暫時結束,之後繼續補新進度


上一篇
Day22 - 事件(03)
下一篇
Day24 - 資料儲存與更新(01)
系列文
JavaScript 新手筆記31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言